.clock {
    margin: 40px;
    position: relative;
    width: 300px;
    height: 300px;
  }
  
  .clock-bg {
    border: 5px solid rgb(8, 8, 8);
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: relative;
  }
  /* >第一层div */
  .clock-bg > div {
    height: 96%;
    width: 4px;
    background-color: rgb(160, 146, 146);
    /* 绝对布局 */
    position: absolute;
    top: 2%;
    left: 50%;
    margin-left: -2px;
  }
  /* :nth-child(n):选择器匹配属于其父元素的第 N 个子元素，不论元素的类型 */
  .clock-bg>div:nth-child(1){
        /* 旋转0° */
      transform:rotate(0deg);
  }
  .clock-bg > div:nth-child(2) {
    transform: rotate(30deg);
  }
  .clock-bg > div:nth-child(3) {
    transform: rotate(60deg);
  }
  .clock-bg > div:nth-child(4) {
    transform: rotate(90deg);
  }
  .clock-bg > div:nth-child(5) {
    transform: rotate(120deg);
  }
  .clock-bg > div:nth-child(6) {
    transform: rotate(150deg);
  }
  /* 伪类 */
  .clock-bg:after {
    content: '';
    position: absolute;
    width: 80%;
    height: 80%;
    background-color: #fff;
    border-radius: 50%;
   /* 自身 */
    left: 50%;
  /* 父级 */
    top: 50%;
    transform: translate(-50%, -50%);
  }
  /* 小圆点 */
  .clock-dot {
    position: absolute;
    width: 15px;
    height: 15px;
    background-color: #000;
    border-radius: 50%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  /* 指针 */
  .clock-point {
    height: 50%;
    position: absolute;
    left: 50%;
    bottom: 50%;
    transform-origin: 50% bottom;
    border-radius: 10px;
  }
  /* 时针 */
  .clock-point.clock-point--hour {
    width: 5px;
    background-color: rgb(26, 10, 10);
    height: 20%;
  }
    /* 分针 */
  .clock-point.clock-point--minute {
    width: 4px;
    background-color: rgb(6, 37, 63);
    height: 35%;
  }
    /* 秒针 */
  .clock-point.clock-point--second {
    width: 2px;
    background-color: rgb(211, 14, 14);
    height: 35%;
  }
  .clock-time, .alter-time{
      color: #000000;
      position: relative;
      font-weight: bold;
      font-family: monospace;
  }
  /* 时钟时间 */
  .clock-time{
    text-align: center;
    margin-top:10px;
    font-size: 30px;
  }
  /* 预设时间 */
  .alter-time{
    text-align: center;
    margin-top:30px;
    font-size: 10px;
  }
  